<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <input type="text" v-model="searchName">
    <ul>
      <li v-for="(item,index) in newPerson" :key='item.id'>
         {{item.name}}-{{item.age}}
      </li>
    </ul>
    <button @click='typeSort=1'>升序</button>
    <button @click='typeSort=2'>降序</button>
    <button @click='typeSort=0'>原顺序</button>
  </div>
  <script src='../js/vue.js'></script>
  <script>
    new Vue({
      el:'#root',
       data:{
         searchName:'',
         typeSort:0,
       person:[
         {id:1,name:'lwx',age:22},
         {id:2,name:'tom',age:21},
         {id:3,name:'jack',age:23},
         {id:4,name:'doinb',age:22},
         {id:5,name:'river',age:29},
         {id:6,name:'tian',age:12},
       ], 
       },
      computed:{
       newPerson(){
         const{person,searchName,typeSort}=this
         const arr = person.filter(p=>{
          return p.name.includes(searchName)
         })
         if(typeSort !== 0){
           arr.sort((it1,it2)=>{
             if(typeSort === 1){
               return it2.age-it1.age
             }else{
               return it1.age-it2.age
             }
           })
         }
         return arr
       }
      }
    })
  </script>
</body>
</html>